<template>
    <div class="app-container">
        <div class="monitor_warp">
            <div class="monitor_warp_left">
                <!--        <div class="head-container">-->
                <!--          <el-input-->
                <!--            v-model="deptName"-->
                <!--            placeholder="请输入组织名称"-->
                <!--            clearable-->
                <!--            size="small"-->
                <!--            prefix-icon="el-icon-search"-->
                <!--            style="margin-bottom: 20px"-->
                <!--          />-->
                <!--        </div>-->
                <el-tree :data="treeData" node-key="id" @node-click="handleNodeClick" :highlight-current="true"
                    :expand-on-click-node="false" ref="tree">
                    <span slot-scope="{ data }" class="span__" style="padding-left:6px;">
                        <span class="el-icon-folder-opened" style="margin-right:10px;"></span>
                        {{ data.name }}
                        <span class="rightButton2">
                            <span class="iconfont icon-more-grid-big"></span>
                        </span>
                    </span>
                </el-tree>
            </div>
            <div class="monitor_warp_right">
                <el-row :gutter="20">
                    <el-col :span="12" :key="index" v-for="(item, index) of videoArray">
                        <VidoePaly :src="item" :name="'video00'" />
                    </el-col>
                </el-row>
                <!-- <div class="monitor_warp_center">
                    <div class="monitor_warp_video" :key="index" v-for="(item, index) of videoArray">
                        <VidoePaly :src="item" :name="'video00'" />
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import VidoePaly from './vidoePaly.vue'
import vidoeJson from '../../../../public/draco/vidoeJson';
export default {
    name: "Notice",
    components: {
        VidoePaly,
    },
    data() {
        return {
            videoArray: [
            ],
            treeData: [
            ],
            deptName: undefined,
        };
    },
    created() {
        this.treeData = vidoeJson
    },
    watch: {
        // 根据名称筛选组织树
        deptName(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        //树的选择
        handleNodeClick(e) {
            let _this = this
            if (e.url) {
                if (this.videoArray.length < 4) {
                    if (this.videoArray.indexOf(e.url) == -1) {
                        _this.videoArray.unshift(e.url)
                    } else {

                    }
                } else {
                    if (this.videoArray.indexOf(e.url) == -1) {
                        _this.videoArray.unshift(e.url)
                    } else {

                    }
                    if (this.videoArray.length > 4) {
                        this.videoArray.pop()
                    }
                }
            }
            console.log(this.videoArray, '111111111');
        },
    }
};
</script>

<style scoped lang="scss">
.monitor_warp {
    display: flex;

    .monitor_warp_left {
        width: 250px;
        border: 1px solid gainsboro;
        margin-right: 10px;
        border-radius: 20px;
        max-height: 85vh;
        height: 85vh;
        padding: 10px;
        overflow: scroll;
    }

    .monitor_warp_right {
        flex: 1;
        height: 85vh;

        .monitor_warp_center {
            display: flex;
            flex-wrap: wrap;
            margin: 10px 80px;

            .monitor_warp_video {
                width: 600px;
                margin: 0 10px;
            }
        }
    }
}
</style>
